<script lang="ts" setup>
import { defineProps } from "vue";
import { requestGetSoundSource } from "../../../utils/axiosURL";
import useSongURLStore from "../../../store/songURL"
import { storeToRefs } from "pinia";

const { songName, playStates } = storeToRefs(useSongURLStore())
const songURLStore = useSongURLStore()
const { songData } = defineProps({
  songData: Array
})
// 双击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}
</script>

<template>
  <ul>
    <li v-for="(item, index) in songData"
      @dblclick="clickSongPlay(item.song.id, item.song.name, item.song.ar[0].name, item.song.al.picUrl, item.song.dt, index)">
      <span class="index">{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</span>
          <span v-if="item.song.name !== songName" class="iconfont icon-xihuan"></span>
          <span v-else>
            <span v-if="playStates" class="iconfont icon-24gf-volumeZero"></span>
            <span v-else class="iconfont icon-24gf-volumeMiddle"></span>
          </span>
          <span class="iconfont icon-xiazai"></span>
          <span class="songName">{{ item.song.name }}</span>
          <button v-if=item.song.hr>Hi-Res</button>
          <RouterLink :to="`/MVDetail/${item.mv}`">
            <button class="mv" v-if=item.song.mv>MV</button>
          </RouterLink>
          <button v-if=item.song.sq>SQ</button>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
ul {
  li {
    padding-left: 30px;
    line-height: 35px;
    box-sizing: border-box;

    .index {
      margin-right: 10px;
      color: $font_second_color;
      font-size: $font-size-xs;
    }

    .mv {
      cursor: pointer;
    }

    .icon-xihuan,
    .icon-xiazai {
      margin-right: 10px;
      color: $font_second_color;
    }

    .icon-24gf-volumeZero,
    .icon-24gf-volumeMiddle {
      margin-left: 3px;
      @include author_color('author_color');
      margin-right: 8px;
    }

    .songName {
      margin-left: 15px;
      font-size: $font-size-xs;
    }

    button {
      border: none;
      outline: none;
      height: 16px;
      line-height: 16px;
      padding: 0 2px;
      border-width: 1.5px;
      border-style: solid;
      @include border_color('border_color');
      background-color: #fff;
      @include author_color('author_color');
      margin: 0 4px;
      font-family: $activeTextFont;
      font-size: $font-size-xs;
      border-radius: 3px;
      font-weight: bold;
    }

    &:nth-child(even) {
      background-color: rgb(250, 250, 250);
    }

    &:hover {
      background-color: rgb(241, 242, 243);
    }
  }
}
</style>
